<template>
  <div class="tech-spec-container">
    <div class="main-layout">
      <!-- 左侧面板 -->
      <div class="left-panel" :style="{ width: leftPanelWidth + 'px' }">
        <!-- 搜索框 -->
        <div class="search-section">
          <a-input-search
            v-model:value="searchValue"
            placeholder="搜索文档..."
            class="search-input"
            allow-clear
            @search="onSearch"
            @change="(e: Event) => onSearch((e.target as HTMLInputElement).value)"
          />
        </div>
        
        <!-- 新建文档按钮 -->
        <div class="action-section">
          <a-button type="primary" class="settings-btn" @click="openSettings">
            <template #icon><SettingOutlined /></template>
          </a-button>
          <a-button class="expand-btn" @click="toggleExpandAll">
            {{ isAllExpanded ? '全部折叠' : '全部展开' }}
          </a-button>
          <!-- <a-button type="primary" class="new-doc-btn" @click="createNewDoc">
            新建文档
          </a-button>
          <a-button class="upload-btn" @click="uploadDoc">
            上传文档
          </a-button> -->
        </div>
        
        <!-- 文档树形结构 -->
        <div class="tree-section">
          <div v-if="!hasSelectedFolder" class="empty-tree">
            <div class="empty-content">
              <folder-outlined class="empty-icon" />
              <p class="empty-text">请点击设置按钮选择文档文件夹</p>
              <p class="empty-hint">选择后将显示文件夹中的文档结构</p>
            </div>
          </div>
          <div v-else-if="hasSelectedFolder && treeData.length === 0 && isSearching" class="empty-tree">
            <div class="empty-content">
              <file-text-outlined class="empty-icon" />
              <p class="empty-text">未找到匹配的文档</p>
              <p class="empty-hint">尝试使用其他关键词搜索</p>
            </div>
          </div>
          <div v-else-if="hasSelectedFolder && originalTreeData.length === 0" class="empty-tree">
            <div class="empty-content">
              <folder-outlined class="empty-icon" />
              <p class="empty-text">文件夹为空</p>
              <p class="empty-hint">请选择包含文档的文件夹</p>
            </div>
          </div>
          <div 
            v-else 
            class="tree-container"
            @contextmenu="handleTreeAreaRightClick"
          >
            <a-tree
               v-model:selectedKeys="selectedKeys"
               v-model:expandedKeys="expandedKeys"
               :tree-data="treeData"
               :show-icon="true"
               :show-line="true"
               @select="onTreeSelect"
               @rightClick="handleTreeNodeRightClick"
               :class="['doc-tree', { 'searching': isSearching }]"
             >
              <!-- <template #icon="{ key, dataRef }">
                <folder-outlined v-if="dataRef.isFolder" />
                <file-text-outlined v-else />
              </template> -->
              <template #title="{ key, title, dataRef }">
                <div class="tree-node-title">
                  <a-tag 
                    :color="getFileTypeColor(dataRef)"
                    size="small"
                    class="file-type-tag"
                  >
                    {{ getFileTypeLabel(dataRef) }}
                  </a-tag>
                  <span class="node-name">{{ title }}</span>
                </div>
              </template>
            </a-tree>
          </div>
          
          <!-- 右键菜单 -->
          <a-dropdown 
            v-model:open="contextMenuVisible" 
            :trigger="['contextmenu']"
            placement="bottomLeft"
          >
            <div 
              :style="{
                position: 'fixed',
                left: contextMenuPosition.x + 'px',
                top: contextMenuPosition.y + 'px',
                width: '1px',
                height: '1px',
                pointerEvents: 'none'
              }"
            ></div>
            <template #overlay>
              <a-menu @click="handleContextMenuClick">
                <!-- 空白区域或文件夹右键菜单 -->
                <template v-if="contextMenuType === 'area' || contextMenuType === 'folder'">
                  <a-menu-item key="createFolder">
                    <folder-outlined />
                    新建文件夹
                  </a-menu-item>
                  <a-menu-item key="createFile">
                    <file-text-outlined />
                    新建文件
                  </a-menu-item>
                </template>
                <!-- 文件右键菜单 -->
                <template v-else-if="contextMenuType === 'file'">
                  <a-menu-item key="deleteFile" class="danger-menu-item">
                    <delete-outlined />
                    删除
                  </a-menu-item>
                </template>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </div>
      
      <!-- 可拖拽的分割线 -->
      <div 
        class="resizer"
        @mousedown="startResize"
      ></div>
      
      <!-- 右侧内容区域 -->
      <div class="right-panel" :style="{ width: `calc(100% - ${leftPanelWidth + 4}px)` }">
        <div class="header">
          <div class="title-section">
            <h1>技术规范文档</h1>
            <div class="action-buttons">
              <a-button type="primary" class="primary-btn">基础版本</a-button>
              <a-button class="secondary-btn">3人专业版</a-button>
            </div>
          </div>
          <div class="tabs">
            <a-tabs v-model:activeKey="activeTab" class="custom-tabs">
              <a-tab-pane key="overview" tab="概览" />
              <a-tab-pane key="simple" tab="简单" />
              <a-tab-pane key="history" tab="历史版本" />
            </a-tabs>
          </div>
        </div>
        
        <div class="content">
          <div class="content-card">
            <div class="api-description">
              <h3># 后端API开发规范指南 #</h3>
              <p class="description-text">
                我们设计了一套完整的RESTful API规范，使用标准的HTTP方法（GET, POST, PUT, DELETE）来实现
                各种操作。使用统一的数据格式（如JSON）进行数据交换。**统一的接口**：在URL中包含API版本（如 /v1/users）##2.请求与响应格式
                ### 请求格式：**GET**请求使用查询参数，**POST/PUT**请求使用JSON格式的请求体
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { FolderOutlined, FileTextOutlined, SettingOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import { open } from '@tauri-apps/plugin-dialog'
import { readDir } from '@tauri-apps/plugin-fs'
import { message } from 'ant-design-vue'

// 定义文件系统条目类型
interface FileEntry {
  name: string
  isDirectory: boolean
}

// 定义树节点类型
interface TreeNode {
  title: string
  key: string
  isFolder: boolean
  children?: TreeNode[]
}

const activeTab = ref('overview')
const searchValue = ref('')
const selectedCategory = ref('tech')
const selectedKeys = ref(['tech-spec-1'])
const expandedKeys = ref(['product', 'research', 'tech'])

// 树形数据结构 - 初始为空，提示用户选择文件夹
const treeData = ref<TreeNode[]>([])
// 原始树形数据（用于搜索时恢复）
const originalTreeData = ref<TreeNode[]>([])
// 过滤后的树形数据
const filteredTreeData = ref<TreeNode[]>([])

// 是否已选择文件夹
const hasSelectedFolder = ref(false)
// 是否全部展开
const isAllExpanded = ref(false)
// 是否正在搜索
const isSearching = ref(false)

// 右键菜单相关状态
const contextMenuVisible = ref(false)
const contextMenuPosition = ref({ x: 0, y: 0 })
const contextMenuType = ref<'area' | 'folder' | 'file'>('area')
const contextMenuNodeInfo = ref<TreeNode | null>(null)

// 面板拖拽相关状态
const leftPanelWidth = ref(300) // 左侧面板初始宽度
const isResizing = ref(false)

// 初始化时的默认数据（注释掉，改为动态加载）
// 现在使用动态加载文件夹内容，不再使用静态数据


// 递归搜索树节点
const searchInTree = (nodes: TreeNode[], keyword: string): TreeNode[] => {
  const result: TreeNode[] = []
  
  nodes.forEach(node => {
    const matchesTitle = node.title.toLowerCase().includes(keyword.toLowerCase())
    let matchingChildren: TreeNode[] = []
    
    // 如果有子节点，递归搜索
    if (node.children && node.children.length > 0) {
      matchingChildren = searchInTree(node.children, keyword)
    }
    
    // 如果当前节点匹配或有匹配的子节点，则包含此节点
    if (matchesTitle || matchingChildren.length > 0) {
      const newNode: TreeNode = {
        ...node,
        children: matchingChildren.length > 0 ? matchingChildren : node.children
      }
      result.push(newNode)
    }
  })
  
  return result
}

// 搜索功能
const onSearch = (value: string) => {
  const keyword = value.trim()
  
  if (!keyword) {
    // 清空搜索，恢复原始数据
    treeData.value = JSON.parse(JSON.stringify(originalTreeData.value))
    isSearching.value = false
    // 重置展开状态
    isAllExpanded.value = false
    expandedKeys.value = originalTreeData.value
      .filter((node: TreeNode) => node.isFolder)
      .map((node: TreeNode) => node.key)
      .slice(0, 3)
  } else {
    // 执行搜索
    const searchResults = searchInTree(originalTreeData.value, keyword)
    treeData.value = searchResults
    isSearching.value = true
    
    // 搜索时自动展开所有匹配的节点
    const allKeys = getAllTreeKeys(searchResults)
    expandedKeys.value = allKeys
    isAllExpanded.value = allKeys.length > 0
  }
  
  console.log('搜索:', keyword, '结果数量:', treeData.value.length)
}

const createNewDoc = () => {
  console.log('创建新文档')
}

const uploadDoc = () => {
  console.log('上传文档')
}

const selectCategory = (category: string) => {
  selectedCategory.value = category
  console.log('选择分类:', category)
}

const onTreeSelect = (selectedKeysValue: string[], info: any) => {
  console.log('选择节点:', selectedKeysValue, info)
  if (!info.node.isFolder) {
    // 选择的是文件，可以加载对应的文档内容
    console.log('加载文档:', info.node.title)
  }
}

// 选择文件夹并加载内容
const openSettings = async () => {
  try {
    // 打开文件夹选择对话框
    const selectedPath = await open({
      directory: true,
      multiple: false,
      title: '选择文档文件夹'
    })
    
    if (selectedPath) {
      console.log('选择的文件夹:', selectedPath)
      await loadFolderContent(selectedPath as string)
      hasSelectedFolder.value = true
    }
  } catch (error) {
    console.error('选择文件夹失败:', error)
  }
}

// 获取所有树节点的key（递归）
const getAllTreeKeys = (nodes: TreeNode[]): string[] => {
  const keys: string[] = []
  const traverse = (nodeList: TreeNode[]) => {
    nodeList.forEach(node => {
      if (node.isFolder) {
        keys.push(node.key)
        if (node.children) {
          traverse(node.children)
        }
      }
    })
  }
  traverse(nodes)
  return keys
}

// 切换展开/折叠所有节点
const toggleExpandAll = () => {
  if (treeData.value.length === 0) return
  
  if (isAllExpanded.value) {
    // 当前是全部展开状态，执行折叠
    expandedKeys.value = []
    isAllExpanded.value = false
  } else {
    // 当前是折叠状态，执行全部展开
    expandedKeys.value = getAllTreeKeys(treeData.value)
    isAllExpanded.value = true
  }
}

// 加载文件夹内容
const loadFolderContent = async (folderPath: string) => {
  try {
    const entries = await readDir(folderPath) as FileEntry[]
    const treeNodes = await Promise.all(
      entries.map(async (entry: FileEntry) => {
        const node: TreeNode = {
          title: entry.name,
          key: entry.name,
          isFolder: entry.isDirectory
        }
        
        // 如果是文件夹，递归加载子内容
        if (entry.isDirectory) {
          try {
            const subEntries = await readDir(`${folderPath}/${entry.name}`) as FileEntry[]
            node.children = await Promise.all(
              subEntries.map(async (subEntry: FileEntry) => ({
                title: subEntry.name,
                key: `${entry.name}/${subEntry.name}`,
                isFolder: subEntry.isDirectory
              }))
            )
          } catch (error) {
            console.warn(`无法读取子文件夹 ${entry.name}:`, error)
            node.children = []
          }
        }
        
        return node
      })
    )
    
    // 深拷贝保存原始数据和当前显示数据
    originalTreeData.value = JSON.parse(JSON.stringify(treeNodes))
    treeData.value = treeNodes
    
    // 默认展开第一级文件夹
    expandedKeys.value = treeNodes
      .filter((node: TreeNode) => node.isFolder)
      .map((node: TreeNode) => node.key)
      .slice(0, 3) // 只展开前3个文件夹
    
    // 重置所有搜索相关状态
    isAllExpanded.value = false
    isSearching.value = false
    searchValue.value = ''
      
  } catch (error) {
    console.error('加载文件夹内容失败:', error)
  }
}

// 处理树形区域右键点击（空白区域）
const handleTreeAreaRightClick = (event: MouseEvent) => {
  event.preventDefault()
  contextMenuType.value = 'area'
  contextMenuNodeInfo.value = null
  contextMenuPosition.value = { x: event.clientX, y: event.clientY }
  contextMenuVisible.value = true
}

// 处理树节点右键点击
const handleTreeNodeRightClick = ({ event, node }: { event: MouseEvent; node: any }) => {
  event.preventDefault()
  event.stopPropagation()
  
  contextMenuType.value = node.isFolder ? 'folder' : 'file'
  contextMenuNodeInfo.value = node
  contextMenuPosition.value = { x: event.clientX, y: event.clientY }
  contextMenuVisible.value = true
}

// 处理右键菜单点击事件
const handleContextMenuClick = ({ key }: { key: string }) => {
  contextMenuVisible.value = false
  
  switch (key) {
    case 'createFolder':
      handleCreateFolder()
      break
    case 'createFile':
      handleCreateFile()
      break
    case 'deleteFile':
      handleDeleteFile()
      break
    default:
      break
  }
}

// 创建新文件夹
const handleCreateFolder = () => {
  // TODO: 实现创建文件夹逻辑
  message.info('创建文件夹功能待实现')
  console.log('创建文件夹', {
    type: contextMenuType.value,
    nodeInfo: contextMenuNodeInfo.value
  })
}

// 创建新文件
const handleCreateFile = () => {
  // TODO: 实现创建文件逻辑
  message.info('创建文件功能待实现')
  console.log('创建文件', {
    type: contextMenuType.value,
    nodeInfo: contextMenuNodeInfo.value
  })
}

// 删除文件
const handleDeleteFile = () => {
  if (!contextMenuNodeInfo.value) return
  
  // TODO: 实现删除文件逻辑
  message.info('删除文件功能待实现')
  console.log('删除文件', {
    nodeInfo: contextMenuNodeInfo.value
  })
}

// 全局点击事件处理器，用于关闭右键菜单
const handleGlobalClick = () => {
  if (contextMenuVisible.value) {
    contextMenuVisible.value = false
  }
}

// 拖拽相关函数
const startResize = (event: MouseEvent) => {
  event.preventDefault()
  isResizing.value = true
  document.addEventListener('mousemove', handleResize)
  document.addEventListener('mouseup', stopResize)
  document.body.style.cursor = 'col-resize'
  document.body.style.userSelect = 'none'
}

const handleResize = (event: MouseEvent) => {
  if (!isResizing.value) return
  
  const containerRect = document.querySelector('.tech-spec-container')?.getBoundingClientRect()
  if (!containerRect) return
  
  const newWidth = event.clientX - containerRect.left
  const minWidth = 200
  const maxWidth = containerRect.width - 300
  
  leftPanelWidth.value = Math.max(minWidth, Math.min(maxWidth, newWidth))
}

const stopResize = () => {
  isResizing.value = false
  document.removeEventListener('mousemove', handleResize)
  document.removeEventListener('mouseup', stopResize)
  document.body.style.cursor = ''
  document.body.style.userSelect = ''
}

// 组件挂载时添加全局点击监听器
onMounted(() => {
  document.addEventListener('click', handleGlobalClick)
})

// 组件卸载时移除全局点击监听器和拖拽监听器
onUnmounted(() => {
  document.removeEventListener('click', handleGlobalClick)
  // 清理拖拽相关的事件监听器
  if (isResizing.value) {
    document.removeEventListener('mousemove', handleResize)
    document.removeEventListener('mouseup', stopResize)
    document.body.style.cursor = ''
    document.body.style.userSelect = ''
  }
})

// 获取文件类型颜色
const getFileTypeColor = (node: TreeNode): string => {
  if (node.isFolder) {
    return 'blue'
  }
  
  // 根据文件扩展名返回不同颜色
  const fileName = node.title.toLowerCase()
  if (fileName.endsWith('.md') || fileName.endsWith('.markdown')) {
    return 'green'
  } else if (fileName.endsWith('.js') || fileName.endsWith('.ts') || fileName.endsWith('.jsx') || fileName.endsWith('.tsx')) {
    return 'orange'
  } else if (fileName.endsWith('.vue')) {
    return 'cyan'
  } else if (fileName.endsWith('.json')) {
    return 'purple'
  } else if (fileName.endsWith('.css') || fileName.endsWith('.scss') || fileName.endsWith('.less')) {
    return 'pink'
  } else if (fileName.endsWith('.html') || fileName.endsWith('.htm')) {
    return 'red'
  } else if (fileName.endsWith('.txt')) {
    return 'default'
  } else {
    return 'geekblue'
  }
}

// 获取文件类型标签
const getFileTypeLabel = (node: TreeNode): string => {
  if (node.isFolder) {
    return 'DIR'
  }
  
  // 根据文件扩展名返回不同标签
  const fileName = node.title.toLowerCase()
  if (fileName.endsWith('.md') || fileName.endsWith('.markdown')) {
    return 'MD'
  } else if (fileName.endsWith('.js')) {
    return 'JS'
  } else if (fileName.endsWith('.ts')) {
    return 'TS'
  } else if (fileName.endsWith('.jsx')) {
    return 'JSX'
  } else if (fileName.endsWith('.tsx')) {
    return 'TSX'
  } else if (fileName.endsWith('.vue')) {
    return 'VUE'
  } else if (fileName.endsWith('.json')) {
    return 'JSON'
  } else if (fileName.endsWith('.css')) {
    return 'CSS'
  } else if (fileName.endsWith('.scss')) {
    return 'SCSS'
  } else if (fileName.endsWith('.less')) {
    return 'LESS'
  } else if (fileName.endsWith('.html') || fileName.endsWith('.htm')) {
    return 'HTML'
  } else if (fileName.endsWith('.txt')) {
    return 'TXT'
  } else if (fileName.endsWith('.png') || fileName.endsWith('.jpg') || fileName.endsWith('.jpeg') || fileName.endsWith('.gif') || fileName.endsWith('.svg')) {
    return 'IMG'
  } else if (fileName.endsWith('.pdf')) {
    return 'PDF'
  } else {
    // 获取文件扩展名作为标签
    const dotIndex = fileName.lastIndexOf('.')
    if (dotIndex > 0 && dotIndex < fileName.length - 1) {
      return fileName.substring(dotIndex + 1).toUpperCase()
    }
    return 'FILE'
  }
}
</script>

<style scoped>
.tech-spec-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
}

.main-layout {
  display: flex;
  height: 100%;
  flex: 1;
}

/* 左侧面板样式 */
.left-panel {
  background: #fafafa;
  border-right: 1px solid #e8e8e8;
  display: flex;
  flex-direction: column;
  padding: 16px;
  min-width: 200px;
  max-width: calc(100% - 300px);
}

.search-section {
  margin-bottom: 16px;
}

.search-input {
  width: 100%;
}

.action-section {
  margin-bottom: 16px;
  display: flex;
  gap: 8px;
}

.new-doc-btn {
  flex: 1;
  background: #52c41a;
  border-color: #52c41a;
  border-radius: 4px;
  font-size: 12px;
  height: 32px;
}

.upload-btn {
  flex: 1;
  border-radius: 4px;
  font-size: 12px;
  height: 32px;
}

.tree-section {
  flex: 1;
  overflow-y: auto;
}

.empty-tree {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  text-align: center;
}

.empty-content {
  color: #8c8c8c;
}

.empty-icon {
  font-size: 48px;
  color: #d9d9d9;
  margin-bottom: 16px;
}

.empty-text {
  font-size: 14px;
  color: #595959;
  margin: 8px 0 4px 0;
}

.empty-hint {
  font-size: 12px;
  color: #8c8c8c;
  margin: 0;
}

.doc-tree {
  background: transparent;
}

.doc-tree :deep(.ant-tree-node-content-wrapper) {
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
}

.doc-tree :deep(.ant-tree-node-content-wrapper:hover) {
  background: #e6f7ff;
}

.doc-tree :deep(.ant-tree-node-selected .ant-tree-node-content-wrapper) {
  background: #bae7ff !important;
  color: #1890ff;
}

.doc-tree :deep(.ant-tree-title) {
  font-size: 14px;
  color: #595959;
}

.doc-tree :deep(.ant-tree-node-selected .ant-tree-title) {
  color: #1890ff;
  font-weight: 500;
}

.doc-tree :deep(.ant-tree-switcher) {
  color: #8c8c8c;
}

.doc-tree :deep(.ant-tree-iconEle) {
  margin-right: 6px;
  color: #8c8c8c;
}

.doc-tree :deep(.ant-tree-node-selected .ant-tree-title) {
  color: #1890ff;
}

/* 搜索相关样式 */
.search-input :deep(.ant-input) {
  border-radius: 6px;
}

.search-input :deep(.ant-input-search-button) {
  border-radius: 0 6px 6px 0;
}

/* 搜索状态下的树节点样式 */
.doc-tree.searching :deep(.ant-tree-title) {
  font-weight: 500;
}

/* 搜索结果高亮 */
.search-highlight {
  background-color: #fff2b8;
  padding: 1px 2px;
  border-radius: 2px;
  font-weight: 600;
}

/* 右键菜单样式 */
.tree-container {
  position: relative;
  height: 100%;
}

.danger-menu-item {
  color: #ff4d4f !important;
}

.danger-menu-item:hover {
  background-color: #fff2f0 !important;
  color: #ff4d4f !important;
}

/* 右键菜单图标间距 */
:deep(.ant-menu-item .anticon) {
  margin-right: 8px;
}

/* 树节点标题样式 */
.tree-node-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}

.node-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-type-tag {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  min-width: 32px;
  text-align: center;
  border-radius: 4px;
  margin: 0;
}

/* 树节点悬停效果优化 */
:deep(.ant-tree-node-content-wrapper:hover .file-type-tag) {
  opacity: 0.9;
}

/* 搜索状态下的标签样式 */
.doc-tree.searching :deep(.ant-tree-node-content-wrapper) {
  background: rgba(24, 144, 255, 0.05);
}

.doc-tree.searching .file-type-tag {
  opacity: 0.8;
}

/* 分割线样式 */
.resizer {
  width: 4px;
  background: #e8e8e8;
  cursor: col-resize;
  position: relative;
  transition: background-color 0.2s ease;
}

.resizer:hover {
  background: #1890ff;
}

.resizer:active {
  background: #1890ff;
}

/* 右侧面板样式 */
.right-panel {
  display: flex;
  flex-direction: column;
  background: #fff;
  min-width: 300px;
}

.header {
  padding: 24px 32px;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
}

.title-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.title-section h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #262626;
}

.action-buttons {
  display: flex;
  gap: 12px;
}

.primary-btn {
  background: #52c41a;
  border-color: #52c41a;
  border-radius: 6px;
  font-weight: 500;
}

.primary-btn:hover {
  background: #73d13d;
  border-color: #73d13d;
}

.secondary-btn {
  background: #fa8c16;
  border-color: #fa8c16;
  color: #fff;
  border-radius: 6px;
  font-weight: 500;
}

.secondary-btn:hover {
  background: #ffa940;
  border-color: #ffa940;
  color: #fff;
}

.custom-tabs {
  margin-top: 16px;
}

.custom-tabs :deep(.ant-tabs-nav) {
  margin-bottom: 0;
}

.custom-tabs :deep(.ant-tabs-tab) {
  padding: 12px 24px;
  font-weight: 500;
}

.custom-tabs :deep(.ant-tabs-tab-active) {
  color: #1890ff;
}

.content {
  flex: 1;
  padding: 32px;
  overflow-y: auto;
}

.content-card {
  background: #fff;
  border-radius: 8px;
  padding: 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #f0f0f0;
}

.api-description h3 {
  color: #262626;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  line-height: 1.5;
}

.description-text {
  color: #595959;
  font-size: 14px;
  line-height: 1.8;
  margin: 0;
  text-align: justify;
}

.description-text strong {
  color: #262626;
  font-weight: 600;
}
</style>